<script setup>
import { reactive, ref, shallowReactive, shallowRef } from "vue";
import Home from "./views/Home.vue";
import MeetingRoom from "./views/MeetingRoom.vue";
import User from "./views/User.vue";
import Timeline from "./views/Timeline.vue";
import TimelineColumn from "./views/TimelineColumn.vue";
import TimelineSwiper from "./views/TimelineSwiper.vue";

const nowComponent = shallowRef(TimelineSwiper);

const navs = shallowReactive([{
  id:0,
  title:"首页",
  component: Home
},{
  id:1,
  title:"会议室管理",
  component: MeetingRoom
},{
  id:2,
  title:"用户管理",
  component: User
},{
  id:3,
  title:"时间轴",
  component: Timeline
},{
  id:4,
  title:"时间轴-竖向",
  component: TimelineColumn
},{
  id:5,
  title:"时间轴-Swiper",
  component: TimelineSwiper
}])

</script>

<template>
  <header>
    <ul>
      <li
        v-for="item in navs"
        :key="item.id"
        @click="nowComponent = item.component"
      > {{ item.title }} </li>
    </ul>
  </header>
  <main>
    <KeepAlive>
      <Transition
      enter-active-class="animate__animated animate__tada"
      leave-active-class="animate__animated animate__bounceOutRight"
      >
        <component :is="nowComponent" />
      </Transition>
    </KeepAlive>
  </main>
</template>

<style scoped>
main{
  width:100%;
  height:500px;
  position: relative;
}
.abc-enter-from{
  transform: translate(20px);
  opacity: 0;
}
.abc-enter-active{
  transition: all 0.5s;
}
.abc-enter-to{
  transform: translate(0);
  opacity: 1;
}

.abc-leave-from{
  transform: translate(0);
  opacity: 1;
}
.abc-leave-active{
  transition: all 0.5s;
}
.abc-leave-to{
  transform: translate(-20px);
  opacity: 0;
}
</style>
